jquery中this与$(this)的用法区别.和于js中的this区别

您所在的位置:网站首页 this is和is this的区别 jquery中this与$(this)的用法区别.和于js中的this区别

jquery中this与$(this)的用法区别.和于js中的this区别

2024-07-12 18:25:23| 来源: 网络整理| 查看: 265

jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test"; }, fucntion() { this.title = "OK”; } ); 这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。 但是如果将this换成$(this)就不是那回事了,就会报错了。 以下写法是错误的: $("#textbox").hover( function() { $(this).title = "Test"; }, function() { $(this).title = "OK"; } ); 这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。 JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样: 正确的写法: $("#textbox").hover( function() { $(this).attr('title', 'Test'); }, function() { $(this).attr('title', 'OK'); } ); 使用JQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。

js中的this

我们要记住:this永远指向函数运行时所在的对象!而不是函数被创建时所在的对象。 this对象是在运行时基于函数的执行环境绑定的,在全局环境中,this等于window

先来看个例子:

var fullname = "Trigkit4"; var person = { fullname : 'Jack', prop:{ fullname : 'Blizzard', getFullname : function () { return this.fullname; } } }; console.log(person.prop.getFullname());//Blizzard var test = person.prop.getFullname; console.log(test());//Trigkit4

当getFullname被分配到test变量时,上下文指的是全局对象(window)。这是因为test是被隐式设置为全局对象的属性。出于这个原因,该函数返回window的fullname,所以在这里 this 指的是window, 所以返回的是第一个fullname

说明

this 关键字通常在对象的 构造函数中使用,用来引用对象。

关键字this:总是指向调用该方法的对象,如:

var iCar = new Object(); iCar.color = "red"; iCar.showColor = function(){ alert(this.color);//输出"red" };

关键字this用在对象的showColor()方法中,在此环境,this等于iCar

使用this是因为在实例化对象时,总是不能确定开发者会使用什么样的变量名。使用this,即可在任意多个地方重用同一个函数。考虑下面的例子:

function showColor(){ alert(this.color); } var oCar1 = new Object; oCar1.color = "red"; oCar1.showColor = showColor; var oCar2 = new Object; oCar2.color = "blue"; oCar2.showcolor = showcolor; oCar1.showColor();//输出"red" oCar2.showColor();//输出"blue"

这段代码中,首先用this定义函数showColor(),然后创建两个对象oCar1和oCar2,一个对象属性被设置为"red",另一个为blue;两个对象都被赋予了属性showColor,指向原始的showColor()函数,调用每个showColor的方法,oCar1输出red,oCar2输出blue。

引用对象属性时,必须使用this关键字。

所有基于全局作用域的变量其实都是window对象的属性(property)。这意味着即使是在全局上下文中,this变量也能指向一个对象。

对于 JScript 的客户版本,如果在其他所有对象的上下文之外使用 this,则它指的是 window 对象。 例如:

alert(this);//弹出 object window; 作为构造函数调用

所谓构造函数,就是通过这个函数生成一个新对象(object)。这时,this就指这个新对象。

function test(){ this.x = 10; } var obj = new test(); alert(obj.x); //弹出 10; 全局环境中的this

在看下面一个this出现在全局环境中的例子:

var name = "全局"; function getName(){ var name = "局部"; return this.name; }; alert(getName());//弹出 全局;

函数getName()所处的对象是window对象,因此this也一定在window对象中。此时的this指向window对象,所以getName()返回的this.name其实是window.name,因此alert出全局。

结论:无论this身处何处,一定要找到函数运行时(或者说在何处被调用 了)的位置。

通过不同的调用语法,改变相同函数内部this的值:

var foo = { test:function(){ alert(this); } } foo.test();//object,因为test方法在调用时属于foo对象 var baz = foo.test; baz();//window,因为baz()被调用时属于global对象 局部环境中的this

看下面一个this出现在局部环境中的例子

var name = "全局"; var jubu={ name:"局部", getName:function(){ return this.name; } }; alert(jubu.getName());

其中this身处的函数getName不是在全局环境中,而是处在jubu环境中。无论this身处何处,一定要找到函数运行时的位置。此时函数getName运行时的位置:

alert(jubu.getName());

显然,函数getName所在的对象是jubu,因此this的安身之处定然在jubu,即指向jubu对象,则getName返回的this.name其实是jubu.name,因此alert出来的是“局部”!

作用域链中的this function scoping () { console.log(this); return function () { console.log(this); }; } scoping()(); >>window >> window

因为scoping函数属于window对象,自然作用域链中的函数也属于window对象。

对象中的this

可以在对象的任何方法中使用this来访问该对象的属性。这与用new得到的实例是不一样的。

var obj = { foo: "test", bar: function () { console.log(this.foo); } }; obj.bar(); // "test" 重写this

无法重写this,因为它是一个关键字。

function test () { var this = {}; // Uncaught SyntaxError: Unexpected token this } jquery中的this

$()生成的是什么呢?实际上$()=jquery(),那么也就是说返回的是一个jquery的对象。 $(this)是jquery对象,能调用jquery的方法,例如click(), keyup()。

$(function () { $('button').click(function () { alert(this);//this 表示原生的DOM //$(this)表示当前对象,这里指的是button }) });

结论: this,表示当前的上下文对象是一个html DOM对象,可以调用html对象所拥有的属性,方法。 $(this),代表的上下文对象是一个jquery的上下文对象,可以调用jquery的方法和属性值。



【本文地址】

公司简介

联系我们

今日新闻


点击排行

实验室常用的仪器、试剂和
说到实验室常用到的东西,主要就分为仪器、试剂和耗
不用再找了,全球10大实验
01、赛默飞世尔科技(热电)Thermo Fisher Scientif
三代水柜的量产巅峰T-72坦
作者:寞寒最近,西边闹腾挺大,本来小寞以为忙完这
通风柜跟实验室通风系统有
说到通风柜跟实验室通风,不少人都纠结二者到底是不
集消毒杀菌、烘干收纳为一
厨房是家里细菌较多的地方,潮湿的环境、没有完全密
实验室设备之全钢实验台如
全钢实验台是实验室家具中较为重要的家具之一,很多

推荐新闻


图片新闻

实验室药品柜的特性有哪些
实验室药品柜是实验室家具的重要组成部分之一,主要
小学科学实验中有哪些教学
计算机 计算器 一般 打孔器 打气筒 仪器车 显微镜
实验室各种仪器原理动图讲
1.紫外分光光谱UV分析原理:吸收紫外光能量,引起分
高中化学常见仪器及实验装
1、可加热仪器:2、计量仪器:(1)仪器A的名称:量
微生物操作主要设备和器具
今天盘点一下微生物操作主要设备和器具,别嫌我啰嗦
浅谈通风柜使用基本常识
 众所周知,通风柜功能中最主要的就是排气功能。在

专题文章

    CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭